<template>
  <div class="container">
    <el-dialog :title="titleInfo + '文章'" :visible.sync="dialogVisible">
      <!-- 文章标题 -->
      <el-form :rules="articleForm" ref="articleAddRef" :model="articleAddData">
        <el-form-item label="文章标题:" prop="title">
          <el-input
            v-model="articleAddData.title"
            style="width: 630px;"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <!--  文章内容 -->
        <el-form-item label="文章内容:" prop="articleBody" class="middle">
          <quill-editor
            v-model="articleAddData.articleBody"
            :options="editorOption"
            style="width: 714px;"
          ></quill-editor>
        </el-form-item>
        <!--  视频地址 -->
        <el-form-item label="视频地址:" class="buttom" prop="videoURL">
          <el-input
            v-model="articleAddData.videoURL"
            style="width: 640px; padding-left: 11px;"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCancel">取 消</el-button>
        <el-button type="primary" @click="addArticle">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '../../api/hmmm/articles'
export default {
  name: 'add',
  props: {
    titleInfo: {
      type: String,
      required: true,
    },
    articleAddData: {
      type: [Object, Array],
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false,
      // 表单的基本数据信息对象
      // articleAddData: {
      //   title: '',
      //   articleBody: '',
      //   videoURL: '',
      //   id: '',
      // },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线

            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote', 'code-block'], //引用，代码块
            ['image', 'link'], // 图片 ，链接
          ],
        },
      },
      articleForm: {
        title: [{ required: true, message: '请填写文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请填写文章标题', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    // 显示
    dialogFormV() {
      this.dialogVisible = true
    },
    // 隐藏
    dialogFormH() {
      this.dialogVisible = false
    },
    // 取消按钮
    dialogVisibleCancel() {
      this.dialogVisible = false
      this.$refs.articleAddRef.resetFields()
      // console.log(this.$refs.articleAddRef)
    },
    // 添加按钮  或者修改的函数
    async addArticle() {
      // 有id 就实现编辑的功能
      if (this.articleAddData.id) {
        this.dialogVisible = false
        // console.log(this.articleAddData.id)
        const { data } = await update({
          title: this.articleAddData.title,
          articleBody: this.articleAddData.articleBody,
          videoURL: this.articleAddData.videoURL,
          id: this.articleAddData.id,
        })
        console.log(data)
        this.$emit('addArticleM', this.articleAddData)
      } else {
        if (this.articleAddData.title !== '') {
          // 没有就实现添加的功能
          this.dialogVisible = false
          // console.log(this.articleAddData.id)
          const { data } = await add({
            title: this.articleAddData.title,
            articleBody: this.articleAddData.articleBody,
            videoURL: this.articleAddData.videoURL,
          })
          // console.log(data)
          this.$emit('addArticleM', this.articleAddData)
        } else {
          this.$message.fail('请输入相关信息')
        }
      }
    },
  },
  created() {},
}
</script>

<style scoped lang="scss">
.quill-editor {
  padding-left: 83px;
  height: 200px;
}
.ql-toolbar {
  padding: 0px !important;
}
.middle {
  margin-bottom: 20px;
  box-sizing: border-box;
}
.ql-editor {
  margin-bottom: 160px !important;
}
.buttom {
  margin-top: 50px !important;
}
</style>
<style></style>
